<template>
	<view>
		<view class="product-window" :class="attr.cartAttr === true ? 'on' : ''">
			<view class="textpic acea-row row-between-wrapper">
				<view class="pictrue">
					<image @tap="previewImage" :src="attr.productSelect.image" class="image" />
				</view>
				<view class="text">
					<view class="line1">{{ attr.productSelect.store_name }}</view>
					<view class="money font-color-red">
						￥
						<text class="num">{{ attr.productSelect.price }}</text>
						<text class="stock">库存: {{ attr.productSelect.stock }}</text>
					</view>
				</view>
				<view class="iconfont icon-guanbi" @click="closeAttr"></view>
			</view>
			<view class="productWinList">
				<view class="item" v-for="(item, indexw) in attr.productAttr" :key="indexw">
					<view class="title">{{ item.attrName }}</view>
					<view class="listn acea-row row-middle">
						<view class="itemn" :class="item.index == indexn ? 'on' : ''" v-for="(itemn, indexn) in item.attrValue" @click="tapAttr(indexw, indexn)"
						 :key="indexn">{{ itemn.attr }}</view>
					</view>
				</view>
			</view>
			<view class="cart">
				<view class="title">数量</view>
				<view class="carnum acea-row row-left">
					<view class="item reduce" :class="cartNum <= 1 ? 'on' : ''" @touchstart="gotouchstart(1)" @touchmove="gotouchmove(1)" @touchend="gotouchend(1)">-</view>
					<view class="item num">{{ cartNum }}</view>
					<view class="item plus" :class="cartNum >= attr.productSelect.stock ? 'on' : ''" @touchstart="gotouchstart(2)" @touchmove="gotouchmove(2)" @touchend="gotouchend(2)">+</view>
				</view>
			</view>
		</view>
		<view class="mask" @touchmove.prevent :hidden="attr.cartAttr === false" @click="closeAttr"></view>
	</view>
</template>
<script>
	export default {
		name: "ProductWindow",
		props: {
			attr: {
				type: Object,
				default: () => {},
			},
			cartNum: {
				type: Number,
				default: () => 1,
			},
		},
		data: function() {
			return {
				timeOutEvent: 0,
				merchandise: null
			};
		},
		mounted: function() {
			console.log(this);
		},
		watch: {
			attr(nextAttr) {
				// console.log(nextAttr);
			},
		},
		methods: {
			closeAttr: function() {
				this.$emit("changeFun", {
					action: "changeattr",
					value: false
				});
			},
			CartNumDes: function() {
				this.$emit("changeFun", {
					action: "ChangeCartNum",
					value: false
				});
			},
			CartNumAdd: function() {
				this.$emit("changeFun", {
					action: "ChangeCartNum",
					value: 1
				});
			},
			tapAttr: function(indexw, indexn) {
				// 修改商品规格不生效的原因：
				// H5端下面写法，attr更新，但是除H5外其他端不支持，
				// 尽量避免下面的骚写法，不要在子组件内更新props
				// 这里修改是为了能获取到被选中的属性
				this.attr.productAttr[indexw].index = indexn;
				let that = this;
				let value = that.getCheckedValue().sort().join(",");
				that.$emit("changeFun", {
					action: "ChangeAttr",
					value: {
						value,
						indexw,
						indexn,
					},
				});
			},
			//获取被选中属性；
			getCheckedValue: function() {
				let productAttr = this.attr.productAttr;
				let value = [];
				console.log(productAttr);
				for (let i = 0; i < productAttr.length; i++) {
					for (let j = 0; j < productAttr[i].attrValueArr.length; j++) {
						if (productAttr[i].index === j) {
							value.push(productAttr[i].attrValueArr[j]);
						}
					}
				}
				return value;
			},
			previewImage() {
				uni.previewImage({
					current: 0,
					urls: [this.attr.productSelect.image],
				});
			},
			gotouchstart(type) {
				let that = this;
				clearTimeout(that.timeOutEvent); //清除定时器
				that.timeOutEvent = 0;
				let _type = type;
				that.timeOutEvent = setTimeout(function() {
					//执行长按要执行的内容，
					that.merchandise = setInterval(() => {
						if (_type == 1) {
							that.CartNumDes();
						} else {
							that.CartNumAdd();
						}
					}, 100);
				}, 500); //这里设置定时
			},
			//手释放，如果在500毫秒内就释放，则取消长按事件，此时可以执行click应该执行的事件
			gotouchend(type) {
				let _type = type;
				clearTimeout(this.timeOutEvent);
				if (this.merchandise) {
					clearTimeout(this.merchandise); //清除定时器
				}
				if (this.timeOutEvent != 0) {
					//这里写要执行的内容（尤如click事件）
					if (_type == 1) {
						this.CartNumDes();
					} else {
						this.CartNumAdd()
					}

				}
			},
			//如果手指有移动，则取消所有事件，此时说明用户只是要移动而不是长按 
			gotouchmove(type) {
				clearTimeout(this.timeOutEvent); //清除定时器
				if (this.merchandise) {
					clearTimeout(this.merchandise); //清除定时器
				}
				this.timeOutEvent = 0;
			}
		},
	};
</script>
